<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { searchApi, getPosByIdApi, sendResumeApi } from '../../api/jobSeeker'
import { useRouter } from 'vue-router'

const router = useRouter()
const formInline = ref({ title: '', positionType: '', publishDate: '', })
onMounted(() => {
  onSubmit()
})
//清空查询条件
const clear = () => {
  formInline.value = { title: '', positionType: '', publishDate: '', }
  currentPage.value = 1
  pageSize.value = 8
  onSubmit()
}
// 条件查询
const onSubmit = async () => {
  // 判断时间是否为null
  console.log(formInline.value.publishDate)
  if(!formInline.value.publishDate){
    formInline.value.publishDate = ''
  }
  //  去除字符串首尾空格
  if(!formInline.value.title){
    formInline.value.title = formInline.value.title.trim()
  }
  const result = await searchApi(formInline.value.title, formInline.value.positionType, 
    formInline.value.publishDate, currentPage.value, pageSize.value)
  if(result.code){
    jobList.value = result.data.rows
    total.value = result.data.total
  }else{
    ElMessage.error(result.msg)
  }
}
// 职位列表数据
const jobList = ref([
  {
    id: '1',
    title: 'Java开发实习生-贵阳',
    salaryRange: '20k-27k',
    positionType: '实习',
    educationRequired: '本科',
    experienceRequired: '经验不限',
    publishDate: '2023-08-01',
    companyName: '亚信科技(中国)有限公司',
    companyScale: '10000人以上',
  },
]);
//分页
const total = ref(20)
const currentPage = ref(1)
const pageSize = ref(8)
const background = ref(true)
//每页大小改变时触发
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
  onSubmit()
}
//当前页码改变时触发
const handleCurrentChange = (val) => {
  currentPage.value = val
  onSubmit()
}
//职位详情dialog
const detailVisible = ref(false)
const positionDetail = ref({
  hrId: '1',
  companyId: '1',
  positionId: '1',
  companyName: '上海XXX科技有限公司',
  title: '发生士大夫士大夫',
  salaryRange: '2k-3k',
  workLocation: '手动阀手动阀手动阀阿嘎尔啊',
  experienceRequired: '手动阀手动阀手动阀阿嘎尔啊',
  educationRequired: '手动阀手动阀手动阀阿嘎尔啊',
  positionType: '萨法',
  publishDate: '2022-05-05',
  description: '手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊',
  requirements: '...'
})
//通职位id查询职位详情
const handleJobClick = async (job) => {
  detailVisible.value = true
  const result = await getPosByIdApi(job.id)
  if(result.code){
    positionDetail.value = result.data
  }else{
    ElMessage.error(result.msg)
  }
}
// 发送简历
const sendResume = async(companyId, positionId) => {
  const result = await sendResumeApi(companyId, positionId)
  if(result.code){
    ElMessage.success(result.msg)
    // 关掉弹窗
    detailVisible.value = false
  }else{
    ElMessage.error(result.msg)
  }
}
// 聊天
const chat = (hrId) => {
  // 将HR ID存储在本地存储中，以便聊天页面获取
  localStorage.setItem('targetHrId', hrId)
  router.push('/jobseeker/umenu3')
}
</script>

<template> 
  <div class="home-container">
    <!-- 查询条件 -->
    <div class="section-title">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="职位" style="width: 260px">
          <el-input v-model="formInline.title" placeholder="输入您要查询的职位名称" />
        </el-form-item>
        <el-form-item label="类型">
          <el-select
            v-model="formInline.positionType"
            placeholder="选择职位类型"
            style="width: 190px"
          >
            <el-option label="全职" value="全职" />
            <el-option label="实习" value="实习" />
            <el-option label="兼职" value="兼职" />
          </el-select>
        </el-form-item>
        <el-form-item label="发布时间">
          <el-date-picker
            v-model="formInline.publishDate"
            type="date"
            placeholder="选择发布时间" 
            style="width: 240px"
            value-format="YYYY/MM/DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>        
        <el-form-item>
          <el-button type="info" @click="clear">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 修改为每行4个的职位列表 -->
    <div class="job-list-three-columns">
      <el-card v-for="(job, index) in jobList" :key="job.id" class="job-card" shadow="hover" @click="handleJobClick(job)" >
        <div class="job-header">
          <h3>{{ job.title }}</h3>
          <el-tag type="success" size="small">
            {{ job.positionType }}
          </el-tag>
        </div>
        <div class="job-salary">{{ job.salaryRange }}</div>
        <div class="job-meta">
          <span>{{ job.educationRequired }}</span>
          <span>{{ job.experienceRequired }}</span>
        </div>
        <div style="color: #af99ad;"><span>发布时间：{{ job.publishDate }}</span></div>
        <div class="company-info">
          <div class="company-name">{{ job.companyName }}</div>
          <div class="company-detail">
            {{ job.companyScale }}
          </div>
        </div>
      </el-card>
    </div>
  <div class="container"> 
    <!-- 简洁版职位详情Dialog -->
    <el-dialog v-model="detailVisible" title="职位详情" width="600px" >
      <el-descriptions :column="1" border>
        <el-descriptions-item label="企业名称">
          {{ positionDetail.companyName }}
        </el-descriptions-item>
        <el-descriptions-item label="职位名称">
          {{ positionDetail.title }}
        </el-descriptions-item>
        <el-descriptions-item label="薪资范围">
          {{ positionDetail.salaryRange }}
        </el-descriptions-item>
        <el-descriptions-item label="工作地点">
          {{ positionDetail.workLocation || '未填写' }}
        </el-descriptions-item>
        <el-descriptions-item label="经验要求">
          {{ positionDetail.experienceRequired }}
        </el-descriptions-item>
        <el-descriptions-item label="学历要求">
          {{ positionDetail.educationRequired }}
        </el-descriptions-item>
        <el-descriptions-item label="职位类型">
          {{ positionDetail.positionType }}
        </el-descriptions-item>
        <el-descriptions-item label="发布时间">
          {{ positionDetail.publishDate }}
        </el-descriptions-item>
      </el-descriptions>

      <div class="detail-block">
        <h4>职位描述</h4>
        <div class="content-box">{{ positionDetail.description || '无' }}</div>
      </div>

      <div class="detail-block">
        <h4>职位要求</h4>
        <div class="content-box">{{ positionDetail.requirements || '无' }}</div>
      </div>

      <template #footer>
        <el-button @click="sendResume(positionDetail.companyId, positionDetail.positionId)">立即投递</el-button>
        <el-button @click="chat(positionDetail.hrId)">立即沟通</el-button>
      </template>
    </el-dialog>
  </div>
  </div>
  <div class="page">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[8, 16, 24]"
      :size="size"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped>
  .page{
    display: flex;
  justify-content: center; /* 水平居中 */
  margin-top: 20px; /* 可选：添加顶部间距 */
  }
  .home-container {
    background-color: #fff;
    min-height: calc(100vh - 100px);
    padding: 20px;
  }

  .section-title {
    margin-bottom: 20px;
    /* padding: 20px; */
  }  
  .section-title {
    border: 1px solid #eee4e4;
    padding: 20px 20px 0px 20px;
    /* margin-top: 20px; */
  }

  /* 每行4列的职位列表 */
.job-list-three-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列布局 */
  gap: 20px;
}

.job-card {
  padding: 20px;
  border-radius: 8px;
  transition: all 0.3s;
  background-color: #fff;
  border: 1px solid #eee;
  height: 100%; /* 确保卡片高度一致 */
  box-sizing: border-box; /* 包含padding和border在内的高度计算 */
}

.job-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.job-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.job-header h3 {
  font-size: 18px;
  margin: 0;
  color: #333;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.job-salary {
  color: #606eff;
  font-weight: bold;
  font-size: 16px;
  margin: 10px 0;
}

.job-meta {
  display: flex;
  gap: 15px;
  color: #666;
  font-size: 14px;
  margin: 15px 0;
}

.job-meta i {
  margin-right: 5px;
}

.company-info {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed #eee;
}

.company-name {
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.company-detail {
  font-size: 13px;
  color: #888;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .job-list-three-columns {
    grid-template-columns: repeat(2, 1fr); /* 屏幕较小时改为2列 */
  }
}

@media (max-width: 768px) {
  .job-list-three-columns {
    grid-template-columns: 1fr; /* 手机端改为1列 */
  }
}

.detail-block {
  margin-top: 20px;
}

.detail-block h4 {
  margin-bottom: 8px;
  color: var(--el-text-color-primary);
}

.content-box {
  padding: 12px;
  border: 1px solid var(--el-border-color-light);
  border-radius: 4px;
  background-color: var(--el-fill-color-lighter);
  min-height: 60px;
}
</style>